
{% style %}
#shopify-section-{{ section.id }} .price-item{
  font-size:1rem;
  font-weight:400;
}

{% endstyle %}
{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase
-%}

{%- liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
  endcase
%}

<link rel="stylesheet" href="{{ 'featured-product-index.min.css' | asset_url }}">
<input class="as-featured-product-script" type="hidden" value="{{ 'featured-product.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
{% assign setting = section.settings %}
<div class="{% if show_padding %}py-section{% else %}my-section{% endif %} {{ background_color }}">
  <div class="container">
    <div class="{{ text_color }}">
        <h2 class="mb-6 {% if request.page_type == 'index' %}text-center{% endif %}">{{ section.settings.heading | escape }}</h2>
        {% if setting.collection.products.size > 0 %}
          <div class="row row-cols-2 row-cols-lg-{{ section.settings.desktop_columns_per_row }} gy-6 gy-lg-7 gx-5 gx-lg-4">
            {% for product in setting.collection.products limit: section.settings.limit_product %}
                <div class="col">
                  {% render 'product-card-featured',
                    product_card_product: product,
                    media_size: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    add_image_padding: section.settings.add_image_padding,
                    show_vendor: section.settings.show_vendor,
                    btn_style: btn_style,
                    text_color: text_color,
                    show_quick_buy: section.settings.show_quick_buy
                    forloop: forloop
                  %}
                </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="h-2 d-flex justify-content-center align-items-center">
            <p>{{ 'sections.featured_collection.not_product' | t }}</p>
          </div>
        {% endif %}
        {%- if setting.show_view_all_button and setting.collection.products.size > 0 -%}
          <div class="text-center mt-6 mt-lg-7">
            <a {% if setting.collection.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ setting.collection.url }}" class="btn btn-link link-primary">{{ 'sections.featured_collection.view_all' | t }}</a>
          </div>
        {%- endif -%}
    </div>
  </div>
</div>

{% javascript %}
  (function() {
    var $url = document.querySelector('.as-featured-product-script')
    if (!window.featuredProduct && $url && $url.dataset.designMode !== 'yes') {
      window.featuredProduct = $url.value

      var $script = document.createElement('script')
      $script.src = window.featuredProduct
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}
{% schema %}
{
  "name": "Featured collection",
  "tag": "section",
  "class": "spaced-section as-featured-collection",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Featured collection",
      "label": "Heading"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection" 
    },
    {
      "type": "checkbox",
      "id": "show_view_all_button",
      "label": "Show 'View all' button",
      "default": true
    },
    {
      "type": "select",
      "id": "text_color",
      "options": [
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "black",
      "label": "Text color"
    },
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "header",
      "content": "PRODUCT CARD"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt to image"
        },
        {
          "value": "4x5",
          "label": "Portrait"
        },
        {
          "value": "1x1",
          "label": "Square"
        }
      ],
      "default": "1x1",
      "label": "Image shape"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "Show second image on hover"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "Add image padding"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "Show vendor"
    },
    {
      "type": "checkbox",
      "id": "show_quick_buy",
      "default": false,
      "label": "Show quick buy"
    },
    {
      "type": "range",
      "id": "desktop_columns_per_row",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 4,
      "label": "Products per row"
    },
    {
      "type": "range",
      "id": "limit_product",
      "min": 2,
      "max": 50,
      "step": 1,
      "default": 8,
      "label": "Limit product"
    }
  ],
  "presets": [
    {
      "name": "Featured collection"
    }
  ]
}
{% endschema %}
